<div class="grid">
    <div class="col-12">
        <div class="card">
            <div class="card-w-title">
                <h5 style="font-weight: 900">消防栓详情</h5>
            </div>
            <p-toolbar>
                <div
                    class="p-toolbar-group-left flex flex-wrap formgroup-inline"
                >
                    <p-button label="返回" (click)="goBack()"></p-button>
                    <div style="margin: 2em; font-weight: 500">
                        当前阀门ID为：{{ id }}
                    </div>
                </div>
                <div class="p-toolbar-group-right formgroup-inline">
                    <div
                        class="p-toolbar-group-right flex flex-wrap formgroup-inline"
                        
                    >
                        <!--button pButton pRipple type="button" label="查询" icon="pi pi-check"></button-->
                    </div>
                    <div
                        class="p-toolbar-group-right flex flex-wrap formgroup-inline"
                        style="margin-left: 10px"
                    >
                        <button
                            pButton
                            pRipple
                            type="button"
                            label="查看机电设备"
                            class="p-button-success"
                            (click)="showMeter = !showMeter"
                            *ngIf="!showMeter"
                        ></button>
                        <button
                                pButton
                                pRipple
                                type="button"
                                label="关闭机电设备"
                                class="p-button-warning"
                                (click)="showMeter = !showMeter"
                                *ngIf="showMeter"
                            ></button>
                        <!--button pButton pRipple type="button" label="查询" icon="pi pi-check"></button-->
                    </div>
                    <div
                        class="p-toolbar-group-right flex flex-wrap formgroup-inline"
                        style="margin-left: 10px"
                    >
                        <button
                            pButton
                            type="button"
                            label="新增机电设备"
                            icon="pi pi-plus"
                            class="mr-2"
                            (click)="openDialog(false)"
                        ></button>
                        <!--button pButton pRipple type="button" label="查询" icon="pi pi-check"></button-->
                    </div>
                </div>
            </p-toolbar>
        </div>
        <div class="card card-w-title flex flex-wrap">
            <div class="col-12 xl:col-6" align="right">
                <div style="margin-right: 200px">
                    <label
                        style="
                            font-size: 20px;
                            font-weight: 400;
                            margin-right: 1em;
                        "
                        >机井名称</label
                    >
                    <input
                        id="searchApplicantName"
                        type="text"
                        pInputText
                        [(ngModel)]="form.wellName"
                    />
                </div>
                <div style="margin-right: 200px; margin-top: 20px">
                    <label
                        style="
                            font-size: 20px;
                            font-weight: 400;
                            margin-right: 1em;
                        "
                        >机井编号</label
                    >
                    <input
                        id="searchWellCode"
                        type="text"
                        pInputText
                        [(ngModel)]="form.wellCode"
                    />
                </div>
                <div style="margin-right: 200px; margin-top: 20px">
                    <label
                        style="
                            font-size: 20px;
                            font-weight: 400;
                            margin-right: 1em;
                        "
                        >所在位置</label
                    >
                    <p-cascadeSelect
                        [options]="address"
                        style="margin-right: 73px"
                        optionLabel="name"
                        optionGroupLabel="name"
                        [optionGroupChildren]="['children', 'children']"
                        [(ngModel)]="form.zone"
                        placeholder="选择所在位置"
                    ></p-cascadeSelect>
                </div>
                <div style="margin-right: 200px; margin-top: 20px">
                    <label
                        style="
                            font-size: 20px;
                            font-weight: 400;
                            margin-right: 1em;
                        "
                        >通讯编号</label
                    >
                    <input
                        id="searchWellCode"
                        type="text"
                        pInputText
                        [(ngModel)]="form.comNumber"
                    />
                </div>
                <div style="margin-right: 200px; margin-top: 20px">
                    <label
                        style="
                            font-size: 20px;
                            font-weight: 400;
                            margin-right: 1em;
                        "
                        >经度</label
                    >
                    <input
                        id="searchApplicantName"
                        type="text"
                        pInputText
                        [(ngModel)]="form.longitude"
                    />
                </div>
                <div style="margin-right: 200px; margin-top: 20px">
                    <label
                        style="
                            font-size: 20px;
                            font-weight: 400;
                            margin-right: 1em;
                        "
                        >纬度</label
                    >
                    <input
                        id="searchWellCode"
                        type="text"
                        pInputText
                        [(ngModel)]="form.latitude"
                    />
                </div>
                <div style="margin-right: 200px; margin-top: 20px">
                    <label
                        style="
                            font-size: 20px;
                            font-weight: 400;
                            margin-right: 1em;
                        "
                        >状态</label
                    >
                    <!--input
                            id="searchWellCode"
                            type="text"
                            pInputText
                            [(ngModel)]="form.status"
                        /-->
                    <p-dropdown
                        [options]="status"
                        [(ngModel)]="form.status"
                        optionLabel="label"
                        optionValue="value"
                        style="margin-right: 100px"
                        placeholder="选择机井状态"
                    ></p-dropdown>
                </div>
                <div style="margin-right: 200px; margin-top: 20px">
                    <p-button (click)="save()">保存</p-button>
                </div>
            </div>
            <div class="col-12 xl:col-6" align="right">
                <div style="margin-right: 300px">
                    <label
                        style="
                            font-size: 20px;
                            font-weight: 400;
                            margin-right: 1em;
                        "
                        >井口内径(m)</label
                    >
                    <input
                        id="searchApplicantName"
                        type="text"
                        pInputText
                        [(ngModel)]="form.wellCaliber"
                    />
                </div>
                <div style="margin-right: 300px; margin-top: 20px">
                    <label
                        style="
                            font-size: 20px;
                            font-weight: 400;
                            margin-right: 1em;
                        "
                        >成井时间</label
                    >
                    <input
                        id="searchWellCode"
                        type="text"
                        pInputText
                        [(ngModel)]="form.createTime"
                    />
                </div>
                <div style="margin-right: 300px; margin-top: 20px">
                    <label
                        style="
                            font-size: 20px;
                            font-weight: 400;
                            margin-right: 1em;
                        "
                        >控制灌溉面积(亩)</label
                    >
                    <input
                        id="searchApplicantName"
                        type="text"
                        pInputText
                        [(ngModel)]="form.irrigationArea"
                    />
                </div>
                <div style="margin-right: 300px; margin-top: 20px">
                    <label
                        style="
                            font-size: 20px;
                            font-weight: 400;
                            margin-right: 1em;
                        "
                        >井深(m)</label
                    >
                    <input
                        id="searchApplicantName"
                        type="text"
                        pInputText
                        [(ngModel)]="form.wellDepth"
                    />
                </div>
                <div style="margin-right: 300px; margin-top: 20px">
                    <label
                        style="
                            font-size: 20px;
                            font-weight: 400;
                            margin-right: 1em;
                        "
                        >阀门类型</label
                    >
                    <!--input
                        id="searchWellCode"
                        type="text"
                        pInputText
                        [(ngModel)]="form.wellType"
                    /-->
                    <p-dropdown
                        [options]="type"
                        [(ngModel)]="form.wellType"
                        optionLabel="label"
                        optionValue="value"
                        style="margin-right: 115px"
                        placeholder="选择阀门类型"
                    ></p-dropdown>
                </div>
                <div style="margin-right: 300px; margin-top: 20px">
                    <label
                        style="
                            font-size: 20px;
                            font-weight: 400;
                            margin-right: 1em;
                        "
                        >备注</label
                    >
                    <input
                        id="searchApplicantName"
                        type="text"
                        pInputText
                        [(ngModel)]="form.remark"
                    />
                </div>
                <div style="margin-right: 300px; margin-top: 20px">
                    <label
                        style="
                            font-size: 20px;
                            font-weight: 400;
                            margin-right: 1em;
                        "
                        >取水用途</label
                    >
                    <p-dropdown
                        [options]="usage"
                        [(ngModel)]="form.wellUsage"
                        optionLabel="label"
                        optionValue="value"
                        placeholder="选择取水用途"
                        style="margin-right: 100px"
                    ></p-dropdown>
                </div>
                <div style="margin-right: 500px; margin-top: 20px">
                    <p-button (click)="reset()">重置</p-button>
                </div>
            </div>
        </div>
        <div class="card" *ngIf="showMeter">
            <p-table [value]="meterData">
                <ng-template pTemplate="header">
                    <tr>
                        <th width="120" pFrozenColumn>
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                设备 ID
                            </div>
                        </th>
                        <th width="150">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                设备名称
                            </div>
                        </th>
                        <th width="200">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                安装时间
                            </div>
                        </th>
                        <th width="150">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                设备编号
                            </div>
                        </th>
                        <th width="300">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                设备类型
                            </div>
                        </th>
                        <th width="150">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                状态
                            </div>
                        </th>
                        <th width="150">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                设备型号
                            </div>
                        </th>
                        <th width="150">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                设备型号名称
                            </div>
                        </th>
                        <th width="150">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                口径(m)
                            </div>
                        </th>
                        <th width="200">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                阀控情况
                            </div>
                        </th>
                        <th width="350" pFrozenColumn alignFrozen="right">
                            <div
                                class="flex justify-content-between align-items-center"
                            >
                                操作
                            </div>
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-item>
                    <tr>
                        <td width="120" pFrozenColumn>
                            {{ item.meterId }}
                        </td>
                        <td width="150">
                            {{ item.meterName }}
                        </td>
                        <td width="200">
                            {{ item.createTime }}
                        </td>
                        <td width="150">
                            {{ item.meterCode }}
                        </td>
                        <td width="300">
                            {{ ["压力计", "流量计"][item.meterType] }}
                        </td>
                        <td width="150">
                            {{ meterstatus[item.status || 0].label }}
                        </td>
                        <td width="150">
                            {{ item.meterNo }}
                        </td>
                        <td width="150">
                            {{ item.meterNoName }}
                        </td>
                        <td width="150">
                            {{ item.meterCaliber }}
                        </td>
                        <td width="200">
                            {{ ["不带阀控", "带阀控"][item.meterVc] }}
                        </td>
                        <td
                            width="350"
                            style="text-align: center"
                            pFrozenColumn
                            alignFrozen="right"
                        >
                            <button
                                pButton
                                pRipple
                                type="button"
                                label="修改"
                                class="p-button-secondary"
                                style="margin-left: 20px"
                                (click)="openDialog(true,item)"
                            ></button>
                            <button
                                pButton
                                pRipple
                                type="button"
                                label="删除"
                                class="p-button-danger"
                                style="margin-left: 20px"
                                (click)=" deleteMeter(item)"
                            ></button>
                        </td>
                    </tr>
                </ng-template>
            </p-table>
        </div>
    </div>
    <p-dialog
        [header]="editTag ? '修改机电设备' : '新增机电设备'"
        [(visible)]="display"
        [modal]="true"
        [style]="{ width: '600px', height: '700px' }"
        [draggable]="false"
        [resizable]="true"
    >
        <div class="field grid">
            <label class="col-fixed w-9rem">设备编号</label>
            <div class="col">
                <input type="text" pInputText [(ngModel)]="addForm.meterCode" />
            </div>
        </div>
        <div class="field grid">
            <label class="col-fixed w-9rem">设备名</label>
            <div class="col">
                <input type="text" pInputText [(ngModel)]="addForm.meterName" />
            </div>
        </div>
        <div class="field grid">
            <label class="col-fixed w-9rem">安装时间</label>
            <div class="col">
                <p-calendar
                    [(ngModel)]="addForm.createTime"
                    placeholder="选择安装时间"
                    [showTime]="true"
                    [showSeconds]="true"
                ></p-calendar>
            </div>
        </div>
        <div class="field grid">
            <label class="col-fixed w-9rem">设备型号</label>
            <div class="col">
                <!--input
                    type="text"
                    pInputText
                    class="ng-dirty ng-invalid mr-2"
                    [(ngModel)]="addForm.meterNo"
                /-->
                <p-dropdown
                    [options]="meterType"
                    [(ngModel)]="addForm.meterNo"
                    optionLabel="label"
                    optionValue="label"
                    style="margin-right: 100px"
                    placeholder="选择机电设备型号"
                ></p-dropdown>
            </div>
        </div>
        <div class="field grid">
            <label class="col-fixed w-9rem">状态</label>
            <div class="col">
                <!--input
                    type="text"
                    pInputText
                    class="ng-dirty ng-invalid"
                    [(ngModel)]="addForm.status"
                /-->
                <p-dropdown
                    [options]="meterstatus"
                    [(ngModel)]="addForm.status"
                    optionLabel="label"
                    optionValue="value"
                    style="margin-right: 100px"
                    placeholder="选择机电设备状态"
                ></p-dropdown>
            </div>
        </div>
        <ng-template pTemplate="footer">
            <p-button
                (click)="submitMeter()"
                label="确认"
                styleClass="p-button-text"
            ></p-button>
            <p-button
                (click)="display = false"
                label="取消"
                styleClass="p-button-text"
            ></p-button>
        </ng-template>
    </p-dialog>
</div>
<p-confirmDialog [style]="{ width: '450px' }"></p-confirmDialog>
<p-toast></p-toast>
